<template>
	<div class="amap-wrapper">
		<el-amap class="amap-box" :vid="'amap-vue'" :events="events" :zoom="zoom" :center="center">
			<el-amap-marker class="selectedMarker" :amap-manager="amapManager" :position="position" topWhenClick="true">
			</el-amap-marker>
		</el-amap>
	</div>
</template>

<script>
	var _self;
	import {
		AMapManager
	} from 'vue-amap'
	let amapManager = new AMapManager()
	export default {
		data() {
			return {
				amapManager,
				markerImg: '<img src="' + this.icon + '" style="width:40px;height:40px;"></img>',
				events: {
					click(e) {
						console.log(e)
						let positions = [e.lnglat.lng, e.lnglat.lat]
						_self.choose_position(positions)

					}
				}
			}
		},
		props: {
			zoom: '',
			icon: '',
			choose_position: Function,
			position: {
				type: Array
			},
			center: {
				type: Array
			}

		},
		mounted() {
			_self = this
		},
		methods: {}
	}
</script>

<style>
	.amap-wrapper {
		width: 600px;
		height: 400px;
	}

	.shop_name {
		font-weight: bold;
		font-size: 6px;
		width: 100px;
		color: #66B1FF;
	}
</style>
